<template>
  <div>
    <el-table :data="tableData">
      <el-table-column property="fileName" label="文件名" width="150"></el-table-column>

      <el-table-column property="shareUrl"  label="链接" width="350">
      </el-table-column>

      <el-table-column property="expirationTime" label="过期时间" width="200" :formatter="formatDate"></el-table-column>

      <el-table-column property="code" label="提取码" width="100"></el-table-column>\

      <el-table-column property="createTime" label="生成时间" width="200" :formatter="formatDate"></el-table-column>

      <el-table-column label="操作">
        <template #default="{ row }">
          <el-button type="success" @click="copyLinkAndCode(row)">复制链接和提取码</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup>
import { ref, reactive} from "vue"
import request from "@/utils/request.js";
import router from "@/router/router.js";
import dayjs from "dayjs";
import {ElMessage} from "element-plus";

// 时间格式化函数
const formatDate = (row, column, cellValue) => {
  if (!cellValue) return '';
  return dayjs(cellValue).format('YYYY-MM-DD HH:mm:ss');
};

const init = () => {
  request.post('/share/list').then((res)=>{
    console.log(res.data)
    tableData.value=res.data
  })
};
init()


const tableData=ref([])
const url=ref()

// 复制链接和提取码的函数
const copyLinkAndCode = (row) => {
  const textToCopy = `链接: ${row.shareUrl}\n提取码: ${row.code}`;

  // 使用 Clipboard API 复制内容到剪贴板
  navigator.clipboard.writeText(textToCopy).then(() => {
    ElMessage.success('链接和提取码已复制！');
  }).catch(err => {
    ElMessage.error('复制失败，请重试！');
  });
};




</script>

<style lang="scss" scoped>

</style>
